<template>
  <div id="course-adjustment">
    <div
      class="wrapper-container"
      style="display: flex; flex-direction: column; width: 100%"
    >
      <div class="search-container">
        <div class="search-container-left">
          <div
            class="search-container-item"
            v-for="(select, index) in selectList"
            :key="index"
          >
          <div v-if="select.type === 'selectTree'" class="box">
              <span v-show="select.name">{{ select.name }}</span>
              <el-popover
                trigger="click"
                placement="bottom"
                v-model="showUnitTree"
                style="cursor: pointer;"
                width="120">
                <div style="max-height: 260px;overflow-y: auto;">
                <el-tree
                      default-expand-all
                      node-key="id"
                      :data="select.valList"
                      :expand-on-click-node="false"
                      :props="props"
                      @node-click="toShowUnitInfo">
                </el-tree>
                </div>
                <el-input slot="reference" v-model="select.val" class="selectTree"
                    clearable style="width: 120px;" suffix-icon="el-icon-arrow-down">
                </el-input>
              </el-popover>
            </div>

            <div v-if="select.type === 'select'" class="box">
              <span v-show="select.name">{{ select.name }}</span>

              <el-select
                v-model="select.val"
                style="width: 90px"
                size="mini"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in select.valList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="box" v-if="select.type === 'data'">
              <span class="demonstration" v-show="select.name">{{
                select.name
              }}</span>
              <el-date-picker
                v-model="select.val"
                type="date"
                placeholder="选择日期"
                prefix-icon="aaa"
              >
              </el-date-picker>
            </div>
            <div v-if="select.type === 'MultiSelect'" class="box"></div>
            <div v-if="select.type === 'btn'" class="box">
              <span class="demonstration" v-show="select.name">{{
                select.name
              }}</span>
              <el-input
                v-model="select.val"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
          <div class="search-button" style="margin-left: 20px;margin-top: 2px;" @click="queryAdjustmentCourse()">
            <img src="../../../../assets/assessment/icon-search.png" alt="" />
            <span>查询</span>
          </div>

          <div
            class="search-button"
            style="margin-left: 20px;margin-top: 2px;"
            @click="handleAddAdjuest"
          >
            <span>调课登记</span>
          </div>
        </div>
      </div>
    </div>

    <div class="assessment-container">
      <div class="table-container">
        <el-table
          :data="tableData"
          border
          class="table-data"
          row-class-name="row-class"
          cell-class-name="cell-class"
          header-row-class-name="header-row-class"
          header-cell-class-name="header-cell-class"
          style="height: calc(100vh - 350px); overflow-y: auto"
        >
          <el-table-column
            type="selection"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="opreate"
            label="操作"
            align="center"
            width="220px"
          >
            <template slot-scope="scope">
              <div
                style="
                  display: flex;
                  padding-left: 10px;
                  justify-content: space-around;
                "
              >
              <el-button type="success" size="mini" plain icon="el-icon-edit"  @click="editRowInfo(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" plain icon="el-icon-delete"  @click="deletedMessageInfo(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="courseno" label="课程编号" align="center">
          </el-table-column>
          <el-table-column prop="coursename" label="课程名称" align="center">
          </el-table-column>
          <el-table-column prop="xb" label="系" align="center">
          </el-table-column>
          <el-table-column prop="classroom" label="教研室" align="center">
          </el-table-column>
          <el-table-column
            prop="oldcoursedate"
            label="原授课时间"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="oldcourseteacher"
            label="原授课教员"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="courseplace"
            label="原授课地点"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="newcoursedate"
            label="现授课时间"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="newcourseteacher"
            label="现授课教员"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="courseplace"
            label="现授课地点"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="reason"
            label="调课原因"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wrapper-container">
      <div class="bottom-block" style="display: block">
        <div class="text"> 当前共找到{{ total }}条记录,当前显示{{ startPage }}-{{ endPage }}条</div>
      </div>
      <div class="pagination-block">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      :destroy-on-close="true"
      title="调课登记"
      :visible.sync="showAddMessageDialog"
      width="1300px"
      class="tkdj"
    >
      <div class="body-manual-container">
        <div>
          <ul>
            <li>
              <span class="active">学期</span>
              <span>
                <el-select
                  v-model="semester"
                  style="width: 90%"
                  size="mini"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in semesterList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </span>
              <span class="active">课程编号[课程名称]</span>
              <span style="display:flex">
                <el-input
                  style="width: 90%; height: 28px"
                  size="small"
                  v-model="className"
                  disabled
                ></el-input>
                <i
                  style="margin-top: 5px"
                  class="el-icon-edit edit-icon"
                  @click="openSelectClassInfo"
                ></i>
              </span>
            </li>
            <li>
              <span class="active" style="height: 100px">授课时间</span>
              <span style="padding: 10px; width: 900px; height: 100px">
                <div class="date-select">
                  <div style="width: 225px">
                    <span>日期：</span>
                    <el-date-picker
                      style="width:120px"
                      v-model="sksj_Date"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                      prefix-icon="aaa"
                    >
                    </el-date-picker>
                    <span style="margin-left: 20px">节次：</span>
                  </div>
                  <div class="date-select-show">
                    <div
                      v-for="(item, index) in selectSectionList"
                      :key="index"
                      style="width: 210px; margin: 10px 0"
                    >
                      <el-select
                        v-model="item.section1"
                        style="width: 90px"
                        size="mini"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in sectionList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      --
                      <el-select
                        v-model="item.section2"
                        style="width: 90px"
                        size="mini"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in sectionList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div>
                    <i
                      class="el-icon-circle-plus-outline add-icon"
                      @click="addSectionList"
                    ></i>
                  </div>
                </div>
              </span>
            </li>
            <li>
              <span class="active">授课地点</span>
              <span>
                <div class="dialog-input">
                    <el-input v-model="skdd" class="dialog-input" disabled></el-input>
                    <i class="el-icon-edit edit-icon" @click="selectPlaceBeforeAndAfter('before')"></i>
                  </div>
                <!-- <el-input v-model="skdd" style="width:90%"></el-input> -->
              </span>
              <span class="active">授课教员</span>
              <span style="display: flex;">
                <el-input
                  style="width: 90%; height: 28px"
                  size="small"
                  v-model="instructor"
                  disabled
                ></el-input>
                <i
                  style="margin-top: 5px;"
                  class="el-icon-edit edit-icon"
                  @click="selectTeacherBeforeAndAfter('before')"
                ></i>
              </span>
               <!-- <span>
               <el-select
                  v-model="instructor"
                  style="width: 90%"
                  size="mini"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in instructorList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </span>-->
            </li>
            <li>
              <span class="active">调课后教员</span>
              <span style="display: flex;">
                <el-input
                  style="width: 90%; height: 28px"
                  size="small"
                  v-model="afterClassTeacher"
                  disabled
                ></el-input>
                <i
                  style="margin-top: 5px;"
                  class="el-icon-edit edit-icon"
                  @click="selectTeacherBeforeAndAfter('after')"
                ></i>
              </span>
            </li>
            <li>
              <span class="active" style="height: 100px">调课后时间</span>
              <span style="padding: 10px; width: 900px; height: 100px">
                <div class="date-select">
                  <div style="width: 225px">
                    <span>日期：</span>
                    <el-date-picker
                    style="width:120px"
                      v-model="tksj_Date"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                      prefix-icon="aaa"
                    >
                    </el-date-picker>
                    <span style="margin-left: 20px">节次：</span>
                  </div>
                  <div class="date-select-show">
                    <div
                      v-for="(item, index) in selectAfterSectionList"
                      :key="index"
                      style="width: 210px; margin: 10px 0"
                    >
                      <el-select
                        v-model="item.after_section1"
                        style="width: 90px"
                        size="mini"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in sectionList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      --
                      <el-select
                        v-model="item.after_section2"
                        style="width: 90px"
                        size="mini"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in sectionList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div>
                    <i
                      class="el-icon-circle-plus-outline add-icon"
                      @click="addAfterSectionList"
                    ></i>
                  </div>
                </div>
              </span>
            </li>
            <li>
              <span class="active">调课后地点</span>
              <span>
                <div class="dialog-input">
                    <el-input v-model="afterPlace" class="dialog-input"></el-input>
                    <i class="el-icon-edit edit-icon" @click="selectPlaceBeforeAndAfter('after')"></i>
                  </div>
              </span>
            </li>
            <li>
              <span class="active" style="height: 120px">调课原因</span>
              <span style="height: 120px">
                <el-input
                  style="width: 520px"
                  size="small"
                  v-model="adjustmentReasons"
                  type="textarea"
                  :rows="3"
                ></el-input>
              </span>
            </li>
            <li>
              <span class="active" style="height: 120px">备注</span>
              <span style="height: 120px">
                <el-input
                  style="width: 520px"
                  size="small"
                  v-model="remarks"
                  type="textarea"
                  :rows="3"
                ></el-input>
              </span>
            </li>
          </ul>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="addTiaokeDJ">确 定</el-button>
        <el-button
          type="warning"
          plain
          @click="cancelTiaokeDJ"
          style="margin-left: 60px"
        >
          取消
        </el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="deletedMessageDialog" width="500px" class="xxts">
      <div class="class-tip">
        您确定删除<span>{{ selectRow.className }}</span
        >课程?
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="deletedInfo">确 定</button>
        <button
          class="yellow"
          @click="deletedMessageDialog = false"
          style="margin-left: 60px"
        >
          取 消
        </button>
      </span>
    </el-dialog>

    <el-dialog
      title="选择课程名称"
      :visible.sync="editTeacherDialog"
      width="1400px"
      class="xzkc"
    >
      <div
        class="wrapper-container"
        style="display: flex; flex-direction: column; width: 100%"
      >
        <div class="search-container" style="width: 100%">
          <div class="search-container-left" style="width: 100%">
            <div
              style="width: 230px"
              class="search-container-item"
              v-for="(select, index) in selectList_dialog"
              :key="index"
            >
              <div v-if="select.type === 'selectTree'" class="box"  style="width:250px">
                  <span v-show="select.name">{{ select.name }}</span>
                  <el-popover
                    trigger="click"
                    placement="bottom"
                    v-model="showUnitClassTree"
                    style="cursor: pointer;"
                    width="120">
                    <div style="max-height: 260px;overflow-y: auto;">
                    <el-tree
                          default-expand-all
                          node-key="id"
                          :data="select.valList"
                          :expand-on-click-node="false"
                          :props="props"
                          @node-click="toShowUnitInfoDialog">
                    </el-tree>
                    </div>
                    <el-input slot="reference" v-model="select.val" class="selectTree"
                        clearable :readonly="true" style="width: 120px;" suffix-icon="el-icon-arrow-down">
                    </el-input>
                  </el-popover>
                </div>
              <div v-if="select.type === 'select'" class="box">
                <span v-show="select.name">{{ select.name }}</span>
                <el-select
                  v-model="select.val"
                  style="width: 90px"
                  size="mini"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in select.valList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="box" v-if="select.type === 'data'">
                <span class="demonstration" v-show="select.name">{{
                  select.name
                }}</span>
                <el-date-picker
                  v-model="select.val"
                  type="date"
                  placeholder="选择日期"
                  prefix-icon="aaa"
                >
                </el-date-picker>
              </div>
              <div v-if="select.type === 'MultiSelect'" class="box"></div>
              <div v-if="select.type === 'btn'" class="box">
                <span class="demonstration" v-show="select.name">{{
                  select.name
                }}</span>
                <el-input
                  style="width:120px"
                  v-model="select.val"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </div>
            <div class="search-button" style="margin-left: 20px" @click="queryClassList">
              <img src="../../../../assets/assessment/icon-search.png" alt="" />
              <span>查询</span>
            </div>
          </div>
        </div>
      </div>
      <div class="search-container">
        <div class="search-container-left">
          <div class="search-container-item" style="margin: 5px 0;width: 100%;overflow: auto;height: 25px;">
            <span style="color: #004ca7;margin: 0 5px;">已选课程有:</span>
            <el-tag
              size="small"
              v-for="(tag, inx) in classSelectList"
              :key="tag.id"
              closable
              type="info"
              hit
              @close="handleClose(tag, inx)">
              {{tag.courseName}}
            </el-tag>
          </div>
        </div>
      </div>

      <div class="assessment-container" style="width: 100%">
        <div class="table-container" style="width: 100%">
          <el-table
            ref="multipleTable"
            :data="classTableData"
            border
            class="table-data"
            row-class-name="row-class"
            cell-class-name="cell-class"
            header-row-class-name="header-row-class"
            header-cell-class-name="header-cell-class"
            style="height: 380px; overflow-y: auto"
             @selection-change="handleSelecClass"
          >
            <el-table-column
              type="selection"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="xi" label="系" align="center">
            </el-table-column>
            <el-table-column prop="staffRoom" label="教研室" align="center">
            </el-table-column>
            <el-table-column prop="courseNo" label="课程编号" align="center">
            </el-table-column>
            <el-table-column prop="courseName" label="课程名称" align="center">
            </el-table-column>
            <el-table-column
              prop="courseType"
              label="修习类型"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="courseCharger"
              label="授课教员"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="nj"
              label="年级"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="teachingClassName"
              label="教学班"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="rs"
              label="总人数"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" size="mini" plain @click="submitSelectClass">确定</el-button>
        <el-button type="warning" size="mini" plain @click="cancelSelectClass" style="margin-left: 60px">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :destroy-on-close="true"
      :title="adjustCousetTeacherTitle"
      :visible.sync="showPeopleDialogly"
      width="1200px"
      class="xzjy"
    >
      <div>
        <el-row>
          <el-col :span="4" class="tree">
            <el-tree
              default-expand-all
              :data="jyData"
              :props="defaultProps"
              @node-click="handleNodeClick"
              style="color: #004ca7;background: rgb(240, 242, 245);"
            ></el-tree>
          </el-col>
          <el-col :span="20" style="border-left: 1px solid #004ca7;">
            <div
              class="wrapper-container"
              style="display: flex; flex-direction: column;width:100%"
            >
              <div class="search-container">
                <div class="search-container-left" style="display:flex;align-items: center;">
                  <div
                    class="search-container-item"
                    v-for="(select, index) in selectList_Teacher"
                    :key="index"
                  >
                    <div v-if="select.type === 'btn'" class="box" style="margin-bottom: 0;">
                      <span class="demonstration" v-show="select.name" style="width:100px">{{
                        select.name
                      }}</span>
                      <el-input
                        v-model="select.val"
                        placeholder="请输入内容"
                      ></el-input>
                    </div>
                  </div>

                  <div class="search-button" @click="queryTeacherList">
                    <img
                      src="../../../../assets/assessment/icon-search.png"
                      alt=""
                    />
                    <span @click="queryInfo">查询</span>
                  </div>
                </div>
              </div>

              <div class="assessment-container" style="width:100%">
                <div class="table-container" style="width: 95%;margin: 20px auto 0;">
                  <el-table
                    :data="tableData_People"
                    border
                    class="table-data"
                    row-class-name="row-class"
                    cell-class-name="cell-class"
                    header-row-class-name="header-row-class"
                    header-cell-class-name="header-cell-class"
                    style="height: 380px; overflow-y: auto"
                    @selection-change="handleSelectionChange"
                  >
                      <el-table-column
                        align="center"
                        type="selection"
                        width="80"
                      >
                      </el-table-column>
                       <el-table-column
                        prop="gzbm"
                        label="单位"
                        align="center"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="xm"
                        label="教员姓名"
                        align="center"
                      >
                      </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="submitSelectJY()">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="选择教学场地"
      :visible.sync="selectClassRoomDialog"
      width="1500px"
      class="xuanze_jxcd"
      :destroy-on-close="true"
    >
     <select-class-room  :source="'dialog'" @savePlaceInfo="savePlaceInfo" @cancelPlaceInfo="cancelPlaceInfo"></select-class-room>
     <div style="height:40px"></div>
    </el-dialog>
  </div>
</template>

<script>
import {tk_change_course, queryCommonXueqi, tk_removeCourseList, tk_get_class_list, queryCommonXxType,
  queryCommonJysDept, tk_addCourseList, paike_teacher_list, queryDefaultXueQi, updateCourseList} from "@/api/trainingManagement/place.js";
import selectClassRoom from "../elective/selectClassRoom.vue";

export default {
  components: {
    selectClassRoom,
  },
  data() {
    return {
      afterPlaceId: "",
      selectClassRoomDialog: false, //
      props:{
        children: "children",
        label: "name",
      },
      treeOptionList: [], //单位下拉树
      showUnitTree: false, //
      showUnitClassTree:false,
      unitId: "", //单位id
      unitId2: "", //弹窗中单位id

      total: 0, //总条数
      pageSize: 50, //条数
      startPage: 0, //开始条数
      endPage: 0, //结束条数
      currentPage: 1, //当前页数

      tableData_People:[], //调整后教员表格
      selectList_Teacher: [{
          type: "btn",
          name: "按姓名：",
          val: "",
        }],
        jyData: [], //教员数据
      showPeopleDialogly: false, //调课后弹窗
      adjustCousetTeacherTitle: '授课教员',
      // 校区列表
      data: [
        {
          label: "洛阳校区",
          children: [
            {
              label: "校区领导",
              children: [],
            },
            {
              label: "教学科研处",
              children: [
                {
                  label: "教研室",
                },
                {
                  label: "办公室",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
      showAddMessageDialog: false, //调课登记弹窗
      editTeacherDialog: false, //调课后教员
      selectList: [
        {
          type: "select",
          name: "学期:",
          val: "",
          valList: [],
        },
        {
          type: "selectTree",
          name: "课程负责单位：",
          val: "",
          valList: [],
        },
      ],
      selectList_dialog: [
        {
          type: "selectTree",
          name: "课程负责单位：",
          val: "",
          valList: [],
        },
        {
          type: "select",
          name: "修习类型",
          val: "",
          valList: [],
        },
        {
          type: "btn",
          name: "课程名称：",
          val: "",
        },
      ],
      tableData: [],
      adjustmentid: '',
      semester: "", //学期
      semesterList: [],
      className: "", //课程编号[课程名称]
      classNameId: "", //课程id
      classNo: '',
      classDate: "", //授课时间
      section1: "", //节次1
      section2: "", //节次2
      after_section1: "", //调课后节次1
      after_section2: "", //节次2
      sksj_Date: "", //授课时间
      tksj_Date: "", //调课时间
      sectionList: [{ label: "1", value: "1" },{ label: "2", value: "2" },{ label: "3", value: "3" },{ label: "4", value: "4" },
      { label: "5", value: "5" },{ label: "6", value: "6" },{ label: "7", value: "7" },{ label: "8", value: "8" },{ label: "9", value: "9" },{ label: "10", value: "10" }], //节次列表
      instructor: "", //授课教员
      instructorIds: "", //授课教员id
      instructorList: [{ lable: "张教员", value: "zhang" }],
      afterClassTeacher: "", //调课后教员
      tiaokeTeacherId: "", //调课后教员id
      skdd: "", //授课地点
      skddId: "",//授课地点id

      afterPlace: "", //调课后地点
      adjustmentReasons: "", //调课原因
      remarks: "", //备注
      selectSectionList: [
        {
          section1: "",
          section2: "",
        },
      ],
      selectAfterSectionList: [
        {
          after_section1: "",
          after_section2: ""
        }
      ],
      deletedMessageDialog: false, //删除课程弹窗
      selectRow: {}, //选中行信息
      selectRowList: [], //表格选中信息
      classTableData: [], //选择课程表格数据

      classSelectList: [], //选中课程数据
      selectTreeInfo: {}, //选择教员选中教员节点
      // total: 0, //总条数
      // pageSize: 50, //条数
      // startPage: 0, //开始条数
      // endPage: 0, //结束条数
      // currentPage: 1, //当前页数
      selectPlaceType: "before", //授课地点类型
      selectTeacherType: "before", //选择教员类型
    };
  },
  created() {},
  mounted() {
    this.queryCommonXueqi();
    this.getDefaultXueQi();
    this.queryCommonXxType();
  },
  methods: {
    handleAddAdjuest(){
      this.semester = '';
      this.skddId='';
      this.classNameId="";
      this.className="";
      this.sksj_Date="";
      this.instructorIds="";
      this.tiaokeTeacherId="";
      this.afterPlaceId= "";
      this.adjustmentReasons="";
      this.tksj_Date="";
      this.classNo="";
      this.skdd="";
      this.remarks="";
      this.instructor = "";
      this.afterClassTeacher = "";
      this.selectSectionList = [
        {
          section1: "",
          section2: "",
        },
      ],
        this.selectAfterSectionList = [
        {
          after_section1: "",
          after_section2: ""
        }
      ],
      this.showAddMessageDialog = true
    },
    async getDefaultXueQi(){
      queryDefaultXueQi().then(res=>{
        if(res.data.code == 200){
          this.selectList[0].val = res.data.data;
          this.semester = res.data.data;
        }
      }).then(()=>{
        this.queryCommonDept();
        this.queryAdjustmentCourse();
      })
    },
    selectTeacherBeforeAndAfter(type) {
      if(type == 'before'){
        this.adjustCousetTeacherTitle = '授课教员'
      }else{
        this.adjustCousetTeacherTitle ='调课后教员'
      }
      this.showPeopleDialogly = true;
      this.selectTeacherType = type;
    },
    selectPlaceBeforeAndAfter(type) {
      this.selectPlaceType = type;
      this.selectClassRoomDialog = true;
    },
    // 数组去重
    arrUnique(arr) {
      return arr.filter((item,index) => {
        return arr.indexOf(item) == index
      })
    },
    // 调课登记保存
    async addTiaokeDJ() {
      // if (this.tiaokeTeacherId == "" || this.tiaokeTeacherId == null) {
      //   this.$message.warning("请选择调课后教员!");
      //   return;
      // }
      var oldCourse = [];
      this.selectSectionList.forEach(item => {
        let min = parseInt(item.section1);
        let max = parseInt(item.section2);
        if (min > max) {
          this.$message.warning("请选择正确的上课周次!");
          return;
        }
        for (let i = min; i <= max; i++) {
          oldCourse.push(i);
        }
      });
      if (oldCourse.length == 0) {
        this.$message.warning("请先选择上课节次！");
        return;
      }
      // 调课后节次
      var skjc = this.arrUnique(oldCourse);
      var skjcStr = skjc.join(",");

      var course = [];
      this.selectAfterSectionList.forEach(item => {
        let min = parseInt(item.after_section1);
        let max = parseInt(item.after_section2);
        if (min > max) {
          this.$message.warning("请选择正确的上课周次!");
          return;
        }
        for (let i = min; i <= max; i++) {
          course.push(i);
        }
      });
      if (course.length == 0) {
        this.$message.warning("请先选择上课节次！");
        return;
      }
      // 调课后节次
      var tkhJC = this.arrUnique(course);
      var tkhJCStr = tkhJC.join(",");
      var data = {
          "adjustmentid": this.adjustmentid,
          "xueqi": this.semester,
          "classroom": this.skddId,
          "courseid": this.classNameId,
          "coursename": this.className,
          "oldcoursedate": this.sksj_Date,
          "oldcourseteacher": this.instructorIds,
          "newcourseteacher": this.tiaokeTeacherId,
          "courseplace": this.afterPlaceId,
          "reason": this.adjustmentReasons,
          "newcoursedate": this.tksj_Date,
          "oldcoursejc": skjcStr,
          "newcoursejc": tkhJCStr,
          "courseno": this.classNo,
          "skdd": this.skdd,
          "remark": this.remarks
      }
      if(this.adjustmentid == ''){
        const res = await tk_addCourseList(data);
        if (res.data.code == 200) {
          this.$message.success("添加成功!");
          this.cancelTiaokeDJ();
          this.queryAdjustmentCourse();
        }
      }else{
        updateCourseList(data).then(res=>{
          if(res.data.code == 200){
            this.$message.success("更新成功!");
            this.cancelTiaokeDJ();
            this.queryAdjustmentCourse();
          }
        })
      }

    },
    cancelTiaokeDJ() {
      this.showAddMessageDialog = false
    },
    // 保存教学场地
    async savePlaceInfo(data) {
      if (data.length > 0) {
        if (data.length > 1) {
          this.$message.warning("请最多选择一个教学场地");
          return;
        } else {
          if (this.selectPlaceType =='before') {
            this.skdd = data[0].cdmc;
            this.skddId = data[0].id;
          } else {
            this.afterPlace = data[0].cdmc;
            this.afterPlaceId = data[0].id;
          }
          this.selectClassRoomDialog = false;
        }
      } else {
        this.$message.warning("请先选择教学场地");
        return;
      }
    },
    cancelPlaceInfo() {
      this.selectClassRoomDialog = false;
    },
    // 选择教员
    submitSelectJY() {
      if (this.selectRowList.length > 0) {
        this.showPeopleDialogly = false;
        var teacher = ""
        var ids = ""
        this.selectRowList.forEach(item => {
          teacher += item.xm + ",";
          ids += item.id + ","
        })
        var classTeacher = teacher.substring(0, teacher.length - 1);
        var classTeacherId = ids.substring(0, ids.length - 1);
        if (this.selectTeacherType == 'before') {
          this.instructor = classTeacher;
          this.instructorIds = classTeacherId;
        } else {
          this.afterClassTeacher = classTeacher;
          this.tiaokeTeacherId = classTeacherId;
        }
      } else {
        this.$message.warning("请至少选中一名教员!");
        return;
      }
    },
    // 获取修习类型
    async queryCommonXxType() {
      const res = await queryCommonXxType();
      if (res.data.code == 200) {
        this.selectList_dialog[1].valList = res.data.data;
      }
    },
    // 课程负责单位
    async queryCommonDept() {
      const res = await queryCommonJysDept();
      if (res.data.code == 200) {
        this.selectList[1].valList = res.data.data;
        // this.selectList[1].val = this.selectList[1].valList[0].name;
        // this.unitId = this.selectList[1].valList[0].id;

        this.selectList_dialog[0].valList = res.data.data;
        this.selectList_dialog[0].val = this.selectList_dialog[0].valList[0].name;
        // this.unitId2 = this.selectList_dialog[0].valList[0].id;

        this.jyData = res.data.data;
        this.selectTreeInfo = res.data.data[0];
        this.queryTeacherList();
      }
    },
    toShowUnitInfo(data) {
      this.selectList[1].val = data.name;
      this.unitId = data.id;
      this.showUnitTree = false;
    },
    toShowUnitInfoDialog(data) {
      this.selectList_dialog[0].val = data.name;
      this.unitId2 = data.id;
      this.showUnitClassTree = false;
    },

    // 提交选中课程
    async submitSelectClass() {
      if (this.classSelectList.length != 1) {
        this.$message.warning("请选择一门课程!");
        return;
      }
      this.className = this.classSelectList[0].courseName;
      this.classNameId = this.classSelectList[0].courseId;
      this.classNo = this.classSelectList[0].courseNo;
      this.cancelSelectClass();
    },
    cancelSelectClass() {
      this.editTeacherDialog = false
    },
    //删除标签
    handleClose(tag, inx) {
      this.classSelectList.splice(inx, 1);
      this.$refs.multipleTable.toggleRowSelection(tag);
    },
    // 课程选中
    handleSelecClass(val) {
      this.classSelectList = val;
    },
    openSelectClassInfo() {
      this.editTeacherDialog = true;
      this.queryClassList();
    },
    async queryClassList() {
      var fzdw = this.unitId2;
      var courseProperty = this.selectList_dialog[1].val || '';
      var term = this.semester;
      var courseName = this.selectList_dialog[2].val;
      var STAFF_ROOM = "";
      // var fzdw = "数学系";
      // var courseProperty = 23;
      // var term = "2021春";
      // var courseName = "英语课";
      // var STAFF_ROOM = "教研室1";
      const res = await tk_get_class_list(fzdw, courseProperty, term, courseName, STAFF_ROOM);
      if (res.data.code == 200) {
        this.classTableData = res.data.data;
      }
    },
    // 获取学期列表
    async queryCommonXueqi() {
      const res = await queryCommonXueqi();
      if (res.data.code == 200) {
        this.selectList[0].valList = res.data.data;
        // this.selectList[0].val = this.selectList[0].valList[0].id;
        this.semesterList = res.data.data;
        // this.semester = this.semesterList[0].id; //学期
      }
    },

    // 查询调课列表
    async queryAdjustmentCourse() {
      var xn = this.selectList[0].val;
      var fzdw = this.unitId;
      var current = this.currentPage;
      var size = this.pageSize;
      const res = await tk_change_course(xn, fzdw, current, size);
      if (res.data.code == 200) {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        var length = this.tableData.length;
        this.calculatePage(this.pageSize, res.data.data.current, length);
      }
    },
    // 计算开始和结束条数
    calculatePage(pageSize, current, length) {
      if (current == 1) {
        if (length != 0) {
          this.startPage = 1;
          this.endPage = length;
        }
      } else {
        this.startPage = pageSize * (current - 1) + 1;
        this.endPage = parseInt(this.startPage) + parseInt(length) - 1;
      }
    },
    // 表格多选
    handleSelectionChange(val) {
      this.selectRowList = val;
    },
    // 信息查询
    queryInfo() {},
    handleNodeClick(node) {
      this.selectTreeInfo = node;
    },
    // async queryCommonDept() {
    //   const res = await queryCommonDept();
    //   if (res.data.code == 200) {
    //     this.jyData = res.data.data;
    //     this.selectTreeInfo = res.data.data[0];
    //     this.queryTeacherList();
    //   }
    // },
    // 获取教员
    async queryTeacherList() {
      // var gzbm = this.selectTreeInfo.id;
      // var xm =  this.selectList[0].val;
      // var gzbm = this.selectTreeInfo.id;
      var gzbm = "";
      var xm = this.selectList_Teacher[0].val;
      const res = await paike_teacher_list(gzbm, xm);
      if (res.data.code == 200) {
        this.tableData_People = res.data.data.records;
      }
    },
    // 确认删除
    async deletedInfo() {
      var id = this.selectRow.adjustmentid;
      const res = await tk_removeCourseList(id);
      if (res.data.code == 200) {
        this.$message.success("删除成功!");
        this.deletedMessageDialog = false;
        this.queryAdjustmentCourse()
      }
    },
    editRowInfo(row){
      this.showAddMessageDialog = true




      // "xueqi": this.semester,
      //   "classroom": this.skddId,
      //   "courseid": this.classNameId,
      //   "coursename": this.className,
      //   "oldcoursedate": this.sksj_Date,
      //   "oldcourseteacher": this.instructorIds,
      //   "newcourseteacher": this.tiaokeTeacherId,
      //   "courseplace": this.afterPlaceId,
      //   "reason": this.adjustmentReasons,
      //   "newcoursedate": this.tksj_Date,
      //   "oldcoursejc": skjcStr,
      //   "newcoursejc": tkhJCStr
      this.adjustmentid = row.adjustmentid;
      this.semester = row.xueqi;
      this.classNameId = row.courseid;
      this.className = row.coursename;
      this.sksj_Date = row.oldcoursedate;
      // this.instructorIds =
      this.instructor = row.oldcourseteacher;
      this.skdd = row.skdd
      this.afterClassTeacher = row.newcourseteacher
      this.tksj_Date = row.newcoursedate
      this.afterPlace = row.courseplace
      this.adjustmentReasons = row.reason
      this.remarks = row.remark

      let tempOldJC = row.oldcoursejc.split(',')
      if(tempOldJC && tempOldJC.length > 0){
        this.selectSectionList[0].section1 = tempOldJC[0]
        this.selectSectionList[0].section2 = tempOldJC[1]
      }
      if(tempOldJC && tempOldJC.length > 2){
        this.selectSectionList.push({
          section1: tempOldJC[2],
          section2: tempOldJC[3]
        })
      }
      if(tempOldJC && tempOldJC.length > 4){
        this.selectSectionList.push({
          section1: tempOldJC[4],
          section2: tempOldJC[5]
        })
      }
      if(tempOldJC && tempOldJC.length > 6){
        this.selectSectionList.push({
          section1: tempOldJC[6],
          section2: tempOldJC[7]
        })
      }
      if(tempOldJC && tempOldJC.length > 8){
        this.selectSectionList.push({
          section1: tempOldJC[8],
          section2: tempOldJC[9]
        })
      }


      let tempNewJC = row.newcoursejc.split(',')
      if(tempNewJC && tempNewJC.length > 0){
        this.selectAfterSectionList[0].after_section1 = tempNewJC[0]
        this.selectAfterSectionList[0].after_section2 = tempNewJC[1]
      }
      if(tempNewJC && tempNewJC.length > 2){
        this.selectAfterSectionList.push({
          after_section1: tempNewJC[2],
          after_section2: tempNewJC[3]
        })
      }
      if(tempNewJC && tempNewJC.length > 4){
        this.selectAfterSectionList.push({
          after_section1: tempNewJC[4],
          after_section2: tempNewJC[5]
        })
      }
      if(tempNewJC && tempNewJC.length > 6){
        this.selectSectionList.push({
          after_section1: tempNewJC[6],
          after_section2: tempNewJC[7]
        })
      }
      if(tempNewJC && tempNewJC.length > 8){
        this.selectAfterSectionList.push({
          after_section1: tempNewJC[8],
          after_section2: tempNewJC[9]
        })
      }
    },
    // 课程删除
    deletedMessageInfo(row) {
      this.deletedMessageDialog = true;
      this.selectRow = row;
    },
    // 添加节次
    addSectionList() {
      this.selectSectionList.push({ section1: "", section2: "" });
    },
    // 调课后添加节次
    addAfterSectionList() {
      this.selectAfterSectionList.push({ after_section1: "", after_section2: "" });
    },
    // 调课记录
    submitChangeClassState() {
      this.showAddMessageDialog = false;
    },
    selectTeachersNumber(row) {
      this.$router.push({
        name: "numberCourseDetails",
        params: {
          row: {
            classTimes: row.classTimes,
            start: this.startDate,
            end: this.endDate,
            semester: this.semester,
          },
        },
      });
    },
    selectTeachersNumber(row) {
      this.$router.push({
        name: "numberTeachers",
        params: {
          row: {
            classTimes: row.classTimes,
            start: this.startDate,
            end: this.endDate,
            semester: this.semester,
          },
        },
      });
    },
  },
  computed: {}, //计算属性
};
</script>
<style lang="less" scoped>
.assessment-container {
  .el-dialog__body {
    height: 251px;
  }
  .el-dialog__footer {
    padding: 10px 20px 45px;
  }
  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }
  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
    height: 18px;
    width: 18px;
  }
  .el-checkbox__inner::after {
    height: 10px;
    left: 6px;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }
  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }
  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }
}
</style>
<style lang="less" scoped>
@import "../../../../styles/text.less";
.assessment-container .table-container {
  // overflow: scroll;
}
.assessment-container .table-container .table-header {
  width: 1935px;
}
.assessment-container .table-container .table-body {
  width: 1935px;
}
/deep/ .szjky .el-dialog__body {
  height: 432px;
}
.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>
<style lang="less" scoped>
@import "../../../../styles/supervision.less";

.wrapper-container {
  width: calc(100% - 20px);
  margin: 0 auto;
}

/deep/ .table-container {
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    /*border-radius: 9px;*/
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.wrapper-container .search-container .search-container-left {
  width: 100%;
  flex-wrap: wrap;
  .search-container-item {
    width: 14%;
    margin-right: 0px;
    .box {
      > span {
        text-align: left;
      }
      display: flex;
      justify-content: space-evenly;
      // margin-bottom: 20px;
      align-items: center;
    }
    /deep/ .el-input__inner {
      height: 28px;
    }
  }
}


/deep/.el-date-editor.el-input {
  width: 110px;
}
/deep/ .el-input--medium {
  width: 110px;
  .el-input__inner {
    height: 28px;
    width: 110px;
    padding: 0px 18px;
  }
}
/deep/ .el-table thead {
  color: #004ca7 !important;
}

.btn {
  margin-top: 271px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 271px;
  .submit {
    width: 84px;
    height: 27px;
    line-height: 8px;
  }
}
.bottom-block {
  // display: flex;
  flex-direction: row;
  justify-content: space-between !important;
  .export-button {
    width: 127px;
    height: 27px;
    background: #fff6ef;
    border: 1px solid #f3b815;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    > img {
      width: 17px;
      height: 17px;
    }
    > span {
      margin-left: 12px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
  }
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}

.search-button {
  width: 77px;
  height: 28px;
  line-height: 28px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  > span {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }
  > img {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }
}

.mar-lef-2 {
  margin-left: 20px;
}
.undeLine {
  text-decoration: underline;
  cursor: pointer;
}

.edit-icon {
  font-size: 20px;
  color: #02c86c;
  margin-left: 10px;
  cursor: pointer;
}

.body-manual-container {
  > div:nth-child(1) {
    width: 1200px;
    // height: 785px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 30px auto 0;
    ul {
      list-style: none;
      li {
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;
        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 60px;
          padding-top: 20px;
          vertical-align: middle;
          &:nth-child(n) {
            // width: 357px;
            width: 290px;
          }
          // &:nth-child(2n) {
          // 	width: 444px;
          // }
          &:last-child {
            border-right: none;
          }
          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            // padding-left: 0;
          }
          &.active {
              text-align: center;
              display: flex;
              padding: 0;
              align-items: center;
              padding-left: 100px;
            }
          > span {
            color: rgba(255, 56, 25, 1);
            &.active {
              text-align: left;
              padding-left: 100px;
            }
          }
          > div {
            width: 100%;
          }
          /deep/ .el-input__inner {
            height: 28px;
          }
        }
      }
    }
  }
}

.add-icon {
  font-size: 28px;
  color: #f3b815;
  margin-left: 10px;
  cursor: pointer;
}

.date-select {
  height: 100%;
  padding: 0;
  padding-left: 40px;
  overflow-y: auto;
  width: 900px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.date-select-show {
  height: 100%;
  width: 500px;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.class-tip {
  color: #004ca7;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 40px;
}

.tip-text {
  color: #004ca7;
  margin-left: 5px;
  font-size: 16px;
}


/deep/ .xzjy .el-dialog__body {
  padding: 0 !important;
  .wrapper-container {
    width: 100% !important;
  }
  .wrapper-container .search-container .search-container-left {
    margin-left: 20px;
    flex-wrap: wrap;
    .search-container-item {
      width: 200px;
      margin-right: 10px;
      .box {
        > span {
          text-align: left;
          width: 80px;
        }
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 20px;
        align-items: center;
        .el-input--medium .el-input__inner {
          height: 28px;
        }
      }
    }
  }
}

/deep/ .el-tree-node__expand-icon.expanded {
  color: rgb(0, 76, 167);
}

.xzjy .tree {
  padding: 30px;
  color: rgb(0, 76, 167);
  font-weight: bold;
  font-size: 16px;
}

.xzjy {
  /deep/ .el-dialog {
    height: 700px;
  }
}

.tkdj {
  /deep/ .el-dialog {
    height: 935px;
  }
}

.xxts {
  /deep/ .el-dialog {
    height: 320px;
  }
}

.xzkc {
  /deep/ .el-dialog {
    height: 720px;
  }
  .assessment-container {
  .search-container {
    flex-direction: row;
    justify-content: space-between;
    .search-container-left {
      display: flex;
      flex-direction: row;
    }
    .search-container-right {
      display: flex;
      flex-direction: row;

      justify-content: flex-end;
      margin-top: 17px;
    }
    .search-container-item {
      color: #004ca7;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin-right: 30px;
      > span {
        margin-right: 6px;
      }
    }
  }
}

}
.assessment-container {
  width: calc(100% - 20px);
  .table-container {
     width: 100%;
  }
}
/deep/ .el-tree-node {
  color: #004ca7;
}

.xuanze_jxcd {
  /deep/ .el-dialog {
    height: 900px;
  }
}
.dialog-input {
  display: flex;
  align-items: center;
}
</style>

<style lang="less" scoped>
  #course-adjustment{
    /deep/ .el-button--warning.is-plain{
      background: #FFF6EF;
      border-color: #F3B815;
      color: #F3B815;
      border-radius: 6px;
    }
    /deep/ .el-button--warning.is-plain:focus, .el-button--warning.is-plain:hover{
      color: #F3B815;
      background: #FFF6EF;
      border: 1px solid #F3B815;
      border-radius: 6px;
    }

    /deep/ .el-button--success.is-plain{
      background: #F1FFF8;
      border-color: #02C86C;
      color: #02C86C;
      border-radius: 6px;
    }
    /deep/ .el-button--success.is-plain:hover{
      background: #F1FFF8;
      border: 1px solid #02C86C;
      color: #02C86C;
      border-radius: 6px;
    }

    /deep/ .el-button--primary.is-plain{
      background: #F1F8FE;
      border-color: #51AEF6;
      color: #51AEF6;
      border-radius: 6px;
    }

    /deep/ .el-button--primary.is-plain:hover{
      background: #F1F8FE;
      border: 1px solid #51AEF6;
      color: #51AEF6;
      border-radius: 6px;
    }

    /deep/ .el-button--danger.is-plain{
      background: #FFEFEF;
      border-color: #FF3819;
      color: #FF3819;
      border-radius: 6px;
    }

    /deep/ .el-button--danger.is-plain:hover{
      background: #FFEFEF;
      border: 1px solid #FF3819;
      color: #FF3819;
      border-radius: 6px;
    }
  }
</style>
